<style lang="scss" scoped>
p {
    line-height: 28px;
}

footer {
    position: relative;
     background-color: #f8f5f5;
     height: 80px;
    dl {
        display: flex;
        margin: 10px;
        align-items: center;

        dd {
            margin-left: 5px;

            .doctor {
                background-color: rgb(254, 248, 215);
                color: rgb(173, 140, 96);
                padding: 2px;
                font-size: 12px;
                position: absolute;
                right: 0;
                top: 0;
            }

            p {
                line-height: 26px;
            }
        }
    }
}
</style>
<template>
    <div style="padding: 15px;" v-for="(v,i) in detailList" :key="i">
         <header style="position: sticky;top: -1px;height: 35px;background-color: #fff;z-index:10">
            <van-nav-bar left-arrow :title="v.texttitle" @click-left="$router.go(-1)" />
        </header>
        <h2 style="font-weight: normal;line-height: 35px;margin: 10px 0;"> {{ v.texttitle }} </h2>
        <p style="font-size: 14px; color: #666;">2023-12-08 <span style="color: orangered;"><van-icon
                    name="eye-o" /> {{ v.textcount }} 次</span></p>
        <main>
            <p style="font-size: 14px;">
                {{ v.textdescword }}
            </p>

            <p style="font-size: 14px;">
                {{ v.texttitle }}
            </p>
            <p style="font-size: 14px;">
                {{ v.doctordescword }}
            </p>
        </main>
        <footer>
            <dl>
                <dt><img :src="v.doctorimage" style="width: 50px;height: 50px;
                border-radius: 50%;" alt=""></dt>
                <dd>
                    <p>{{ v.doctorname }} <span class="doctor">妙手医生权威专家</span> </p>
                    <p style="font-size: 13px;color: #666;"> {{ v.doctorstate }} | {{ v.doctoradministre }}</p>
                    <p style="font-size: 13px;color: #666;"><span
                            style="background-color: rgb(9, 184, 128);color: #fff;font-size: 12px;padding: 2px;">三级甲等</span>北京大学第一医院
                    </p>
                </dd>
                <dd style="margin-left: 10px;"><van-button type="primary" size="mini" @click="toDoctorDetail(v)">马上提问</van-button></dd>
            </dl>
        </footer>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue';
import type { ListDatagete } from '../../Type/indeType';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const id = route.params.id
const detailList = ref()
const router=useRouter()
const getDetail = async () => {
    const res = await axios.get('/api/book/detail', { params: { id: id } })
    detailList.value = res.data.data
    console.log(detailList)
}

const toDoctorDetail = (v:ListDatagete) => {
    router.push('/doctordetail?id='+v.doctorid)
}
getDetail()

</script>
